Diagrama de temas

  • Variables

    • Las variables son algo que usas todo el tiempo en programación. Son como un contenedor para diferentes tipos de datos. Para cada variable, necesitas especificar qué tipo de datos contendrán, cuál es el nombre de la variable y qué valor se le asigna.

      Imagina las variables como botes. Digamos que tienes dos botes, uno para galletas y otro para palabras, estos son los tipos de datos. Ahora hay que darles un nombre a cada bote; cookieJar (bote de galletas) y jarOfWord (bote de palabras). Ahora tú decides que poner en cada bote. En el cookieJar pones una galleta de doble chocolate y en el jarOfWord decides poner "hello". Ahora cada bote tiene un valor.

      Puedes cambiar el contenido de los botes, su valor, en cualquier momento, pero siempre y cuando sea del mismo tipo. Por ejemplo, puedes cambiar la galleta de doble chocolate por una oreo y "hello" por "spaceinvader".

      Para hacerlo más claro, vamos a escribir un programa utilizando variables. Escribiremos un programa que dibuje, de nuevo, dos líneas, pero esta vez utilizaremos variables.


      Ejemplo 1.3


      En este ejemplo, dibujarás dos líneas como hicimos en el ejemplo 1.2 pero esta vez, usando variables para almacenar las coordenadas.

      Instrucciones

      1. Escribe y ejecuta el siguiente programa:
        2. 1
        2
        3
        4
        5
        int value1 = 0;
int value2 = 100;
line(value1, value1, value2, value2);
line(value1, value2, value2, value1);
        source: http://verkstad.cc/urler/ctc-g-b1-c-3

      Resultado

      Aparecen las mismas dos líneas del ejemplo 1.2 pero esta vez hemos empleado variables y no hemos modificado el color del fondo.


      Comandos

      • int variableName = value: Crea una variable del tipo "int", del inglés integer, que representa números enteros. variableName puede ser cualquier nombre de tu elección, pero para hacerlo más sencillo, asegúrate que el nombre va acorde con el contexto en el que se usa la variable. value es el valor que quieres almacenar en la variable.


      Comandos

      • Se declara la variable value1 y se inicializa a 0. En cualquier lugar del programa donde escribas value1, será lo mismo que escribir 0.
      • Se declara otra variable, value2 y se inicializa a 100. En cualquier lugar del programa donde escribas value2, será lo mismo que escribir 100.
      • Se dibuja una línea desde las coordenadas (value1, value1) = (0, 0), a (value2, value2) = (100, 100).
      • Se dibuja otra línea desde las coordenadas (value1, value2) = (0, 100), a (value2, value1) = (100, 0).
      • Modifica el valor de las variables para ver qué pasa con las líneas.

      Tipos de datos


      Los tipos de datos que más utilizarás son los siguientes:

      • int: Número entero, por ejemplo, 2, 99 o 532.
      • float: Número decimal, por ejemplo, 2.76, 8.211 o 900.3.
      • boolean: Puede ser verdadero o falso.
      • char: Un caracter, por ejemplo, ‘r’, ‘2’ o ‘%’.
      • String: Una secuencia de carateres, por ejemplo, "hola", "¡Me encanta programar!" o "&%!@¤".

      Variables del sistema


      Processing incluye algunas variables de sistema para hacerlas más accesibles dentro de tus programas. Por ejemplo, width y height. Estas variables devuelven la anchura (width) y altura (height) de la ventana de tu programa.


      Ejemplo 1.4


      En este ejemplo, dibujarás una elipse cuyo tamaño depende del tamaño de tu ventana de programa.

      Instrucciones

      1. Escribe y ejecuta el siguiente programa:
        2. 1
        2
        3
        size(400, 200);
ellipse(width/2, height/2, width, height);
        source: http://verkstad.cc/urler/ctc-g-b1-c-4

      Resultado

      Usando las variables width y height del sistema, la elipse se ajusta al tamaño de la ventana. No importa el tamaño de la ventana, el elipse la llenará siempre por completo. Intenta cambiar el tamaño de la ventana.

      Comandos

      • size(windowWidth, windowHeight): Establece el tamaño de la ventana de programa en píxeles.
      • ellipse(x, y, xDiameter, yDiameter): Dibuja un elipse centrada en las coordenadas x e y. El tamaño se establece con xDiameter e yDiameter. Cuando estos dos parámetros son iguales, el resultado es un círculo.
      • width: Devuelve la anchura de la ventana de programa en píxeles.
      • height: Devuelve la altura de la ventana de programa en píxeles.

      Comandos

      • Se estable el tamaño de la ventana de programa a 400 x 200 píxeles.
      • Dibuja una elipse con centro en las coordenadas (width/2, height/2) = (200, 100). Lo que significa que estará centrada en la ventana de programa.
      • El diámetro x de la elipse se fija al mismo tamaño que la anchura de la ventana (400 píxeles).
      • El diámetro y de la elipse se fija al mismo tamaño que la altura de la ventana (200 píxeles).

      ¡Sigue experimentando!


      • Dibuja una cara sonriente empleando líneas y elipses.
      • Haz que la cara sonriente se ajuste al tamaño de tu ventana.
      • Para seguir aprendiendo sobre Processing, haz click en la página de referencia de Processing.